<template>
  <div class="left_box">
    <CardVue class="warn_msg">
      <template v-slot:content>
        <span v-if="caculateType != '! 博客正在从vue2 重构为 Vue3'"
          >当前分类:</span
        >
        <span :style="{ color: caculateType.length > 10 ? '' : 'blue' }">{{
          caculateType
        }}</span>
        <el-button
          type="primary"
          v-show="caculateType.length < 10"
          size="mini"
          @click="research"
          >重置</el-button
        >
      </template>
    </CardVue>
    <CardVue class="con_box">
      <template v-slot:content>
        <div
          class="con_li"
          v-for="(item, index) in DetailList.list"
          @click="getDetail(item, index)"
        >
          <img class="li_img" :src="'./../../../src/assets/img/'+item.img+'.png'" alt="" />
          <div class="li_right">
            <span class="li_title">{{ item.title }}</span>
            <div class="li_desc">
              <div class="desc_left">
                <span>{{ item.desc }}</span>
                <!-- 历史记录 -->
                <ForIcon
                  :icon="{ src: sunSvg, text: item.history, color: '#666' }"
                />
              </div>
              <div class="desc-right">
                <!-- 热度 -->
                <ForIcon :icon="{ src: hot, text: item.hot, color: '#666' }" />
                <!-- 收藏 -->
                <ForIcon
                  :icon="{ src: like, text: item.like, color: '#666' }"
                />
              </div>
            </div>
          </div>
        </div>
      </template>
    </CardVue>
  </div>
</template>
<script lang="ts" setup>
import CardVue from "@/components/Card.vue";
import ForIcon from "../../components/ForIcon.vue";
import sunSvg from "@/assets/img/history.png";
import hot from "@/assets/svg/hot.svg";
import like from "@/assets/svg/like.svg";
import { ref, computed,onMounted,toRaw } from "vue";
import {BlogList} from "@/store/modules/blogList";
import { useRouter } from "vue-router";
const router = useRouter();
import { useStore } from "vuex";
const store = useStore();




const DetailList = ref<BlogList>([]);
let blogList = computed(() => store.getters.getList);
let caculateType = computed(() => store.getters.caculateType);
DetailList.value = blogList.value;



const getDetail = (item: object, index: number) => {
  router.push({ path: "/about", query: { id: index } });
};

const research = () => {
  store.dispatch("disChangeCaculateType", "! 博客正在从vue2 重构为 Vue3");
};

onMounted(async()=>{})
</script>

<style lang="scss" scoped>
.left_box {
  width: 75%;
  text-align: left;
  .warn_msg {
    display: flex;
    align-items: center;
    color: #3333339a;
    border-radius: 16px;
    max-height: 40px;
    span {
      margin: 0px 10px;
    }
  }
  .left_content {
    margin: 20px 0px;
    border-radius: 20px;
  }
  .con_box {
    border-radius: 10px;
    margin: 20px 0px;
    .con_li {
      display: flex;
      align-items: center;
      margin: 20px 0px;
      padding: 10px 10px;
      box-sizing: border-box;
      .li_img {
        width: 68px;
        height: 56px;
        border-radius: 10px;
      }
      &:hover {
        cursor: pointer;
        box-shadow: 0 0 10px 0 #536dfe87;
        color: #041da6b3;
      }
    }
    .li_right {
      display: flex;
      flex: 1;
      flex-direction: column;
      font-size: 16px;
      margin: 0px 10px;

      .li_title {
        font-size: $fs_big;
        font-size: $fs_large;
        line-height: 24px;
      }
      .li_desc {
        display: flex;
        justify-content: space-between;
        font-size: $fs_mid;
        color: #666;
        line-height: 30px;
        .desc_left {
          display: flex;
          align-items: center;
        }
      }
      .desc-right {
        display: flex;
        align-items: center;
      }
    }
  }
}
::v-deep .el-card__body {
  padding: 10px;
}
</style>
